<template>
  <div class="components-paner">
    <el-tabs v-model="activeName" class="el-tabs-paner">
      <el-tab-pane label="组件" name="first">
        <el-collapse v-model="activeNames">
          <el-collapse-item v-for="sec in assort(componentCollection)" :key="sec.category" :name="sec.category">
            <template slot="title">
              <div class="component-type">{{ sec.category }}<span class="d-text-small d-text-lightgray">({{ sec.list.length }})</span></div>
            </template>
            <div class="list-components">
              <div
                v-for="item in sec.list"
                :key="item.name + item.version"
                @click="handleSelectComponent(item)"
                class="item-component d-text-linker">
                <div class="component-name" :title="item.text">
                  <span class="name-text">{{ item.text }}</span>
                  <el-tooltip v-if="item.description" class="item" effect="light" :content="item.description" placement="bottom">
                    <span class="name-desc"><i class="el-icon-warning-outline"></i></span>
                  </el-tooltip>
                </div>
                <div class="component-icon">
                  <DIcon :src="item.icon" />
                </div>
              </div>
            </div>
          </el-collapse-item>
          <!-- <el-collapse-item name="2">
            <template slot="title">
              <div class="component-type">基础</div>
            </template>
            <div class="list-components">

            </div>
          </el-collapse-item> -->
        </el-collapse>
      </el-tab-pane>
      <!-- <el-tab-pane label="图层" name="second">
        <div class="list-components"></div>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import { arrayer } from '@daelui/dogjs/dist/components.js'
import stock from '../../../service/stock/index'
import DIcon from './dicon.vue'

export default {
  components: {
    DIcon
  },

  props: {
    stock: {
      type: Object,
      default () {
        return stock
      }
    }
  },

  data () {
    return {
      componentCollection: this.stock.state.componentCollection,
      activeName: 'first',
      activeNames: ['1']
    }
  },

  watch: {

  },

  methods: {
    // 选择组件模板插入
    handleSelectComponent (component) {
      this.stock.setter.insertComponent(component)
    },
    assort (list) {
      list = Array.isArray(list) ? list : []
      let map = new Map()
      list.forEach(item => {
        if (!item.category) {
          item.category = '组件'
        }
        let node = map.get(item.category)
        if (!node) {
          node = {
            category: item.category,
            order: item.order,
            list: []
          }
          map.set(item.category, node)
        }
        node.order = node.order < item.order ? item.order : node.order
        node.list.push(item)
      })
      let res = Array.from(map.keys()).map(key => {
        return map.get(key)
      })
      res = res.sort((a,b) => {
        return arrayer.sort(a.order, b.order, 'desc', true)
      })
      return res
    }
  }
}
</script>

<style lang="less" scoped>
.components-paner {
  overflow: auto;
  height: 100%;
  border-radius: 0;
  /deep/ .el-collapse-item__header{
    line-height: 16px;
  }
}
.component-type {
  padding: 0 12px;
  font-weight: 700;
}
.list-components {
  padding: 0 8px;
}
.item-component {
  cursor: pointer;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.04);
  background-color: #fff;
  transition-duration: 0.4s;
  & + .item-component {
    margin-top: 8px;
  }
  &:hover {
    border-color: #439eff;
  }
}
.component-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  color: #666;
  .name-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 90%;
  }
  .name-desc {
    color: #bbb
  }
}
.component-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  padding: 8px;
  text-align: center;
}
</style>
